import styled from 'styled-components'
import logo from '@/assets/img/nav-logo.png'

export const HeaderWrapper = styled.div`
    height: 56px;
    border-bottom: 1px #e7e7e7 solid;
`;

export const Logo = styled.a.attrs({
    href:'/'
})`
    display: block;
    height: 56px;
    width: 100px;
    background-image: url(${logo});
    background-size: contain;
`

export const Nav = styled.div`
    display: flex;
    height: 56px;
`

export const NavItem = styled.div`
    padding: 0px 15px;
    font-size: 15px;
    line-height: 56px;
    &.fill-1{
        flex-grow: 1
    }
    &.tab{
        font-size: 17px;
        cursor:pointer;
        &:hover{
            background: #f5f5f5;
        }
    }
    &.tab.active {
        color: #ea6f5a;
        &:hover{
            background: none;
        }
    }
    &.text-btn{
        cursor: pointer;
        color: #969696;
    }
    &.btn{
        cursor: pointer;
        border: 1px solid rgba(236, 97, 73, 0.7);
        height: 36px;
        line-height: 36px;
        margin: 9px 10px 0px 10px;
        border-radius: 20px;
        padding: 0px 20px;
        color: #ea6f5a;
    }
    &.write-btn{
        background-color: #ea6f5a;
        color: #fff;
    }
`

export const SearchWrapper = styled.span`
    position: relative;
    .iconfont{
        position: absolute;
        right: 10px;
        color: #999;
    }
`

export const SearchInput = styled.input.attrs({
    placeholder:'搜索'
})`
    width: 140px;
    box-sizing: border-box;
    padding: 10px 30px 10px 15px;
    border-radius: 20px;
    outline: none;
    border:1px solid #eee;
    background-color: #eee;
    transition: width 1s; 
    &::placeholder{
        color: #999;
        font-size: 14px;
    }
    
    &:focus{
        width: 240px;
        &+.iconfont{
            background-color: rgb(0,0,0,0.5);
            bottom: -5.4px;
            right: 5px;
            width: 30px;
            height 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            color: #fff;
            cursor: pointer;
        }
    }
`

export const SearchHistroy = styled.div`
    position: absolute;
    width: 240px;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 5px;
    box-sizing: border-box;
    z-index:1;
    &::before{
        content: '';
        position: absolute;
        top: -6px;
        left: 22px;
        border: 6px solid transparent;
        background-color: #fff;
        transform: rotate(45deg);
    }
`
export const SearchHistroyItem = styled.a`
    display: block;
    color: #333;
    height: 36px;
    line-height:36px;
    &::before{
        content: '\\e606';
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding: 10px;
    }
    &:hover{
        background-color: rgba(0,0,0,.1);
        border-radius: 5px;
    }
`